<script setup>
import {
  ref,
  onMounted,
  toRefs,
  computed,
  reactive,
  watch,
  nextTick,
  onUnmounted,
  watchEffect,
  inject,
  provide,
} from "vue";

// 处理 sse逐渐返回的文本
import { parseTextToObject } from "@/common/utils/richTextProcessing.js";
// sse请求封装
import { streamFetch } from "@/common/utils/streamFetch.js";

import store from "@/store";
import utils from "@/common/utils/utils.js";

import { ClockCircleOutlined } from "@ant-design/icons-vue";
import request from "@/common/utils/request";
import { useRouter } from "vue-router";
const router = useRouter();

// 左侧表单
import CreatTextImitationForm from "./CreatTextImitationForm/index.vue";

// 右侧列表
import TextList from "./TextList/index.vue";
import { message } from "ant-design-vue";
import { nanoid } from "nanoid";

// 是否为组件模式
const isComponents = inject("isComponents");
const isonece = inject("isonece");

const TextListRef = ref(null);
const CreatTextImitationFormRef = ref(null);

// 查看历史记录
const toTextImitationList = () => {
  router.push({
    name: "TextImitationList",
  });
};

// 存放右侧列表数据
const setRightList = (list) => {
  TextListRef.value.setList(list);
};
const abortSignal = new AbortController();
// 列表组件 换一篇
const fetchData = async (fn, saveChange) => {
  console.log("接受到子组件换一篇的请求");
  // 获得任务id
  const imitation_id = CreatTextImitationFormRef.value.exposeImitation_id();
  const params = {
    imitation_id,
    user_token: utils.getToken(),
    org_id: utils.getOrgId(),
    team_id: store.state.user.teamId,
  };
  let t;
  // 占位符id
  let delId = nanoid();

  fn({
    item: {
      loding: true,
      checked: false,
      titleEdit: false,
      content: "",
      title: "",
      id: delId,
    },
    type: "add",
  });
  const getFetchItem = async () => {
    let allText;

    const { responseText } = await streamFetch({
      url: `${request.BASE_URL}/work_ai/user/shotstack/scripttext/imitation/change/one`,
      data: params,
      onMessage: (text) => {
        if (utils.isJSONStr(text)) {
          //这里有错误
          let res = JSON.parse(text);
          if (utils.isObject(res) && res.msg) {
            message.error(res.msg);
            return;
          }
        }
        allText += text;
        const res = parseTextToObject(allText);
        console.log(res, "数据");
        fn({
          item: {
            loding: true,
            checked: false,
            titleEdit: false,
            content: res["-内容"],
            title: res["-标题"],
            id: delId,
          },
          type: "update",
        });
      },
      abortSignal,
    }).catch((err) => {
      // state.submitLoding = false;
      console.log(err);
      return {
        responseText: false,
      };
    });

    // 结束之后, 更新状态
    fn({
      item: {
        loding: false,
        id: delId,
      },
      type: "update",
    });
    saveChange(false);
  };
  getFetchItem();
};

const getImitation_id = () => {
  return CreatTextImitationFormRef.value.exposeImitation_id();
};

provide("fetchData", fetchData);
// 返回组件需要的 详情id
provide("getImitation_id", getImitation_id);
</script>

<template>
  <div class="TextImitation">
    <!-- 不为组件, 展示头部 -->
    <div class="title_box" v-if="!isComponents">
      <div class="left_title_box">
        <h2>文案仿写</h2>
      </div>
      <div class="right_title_box">
        <span class="history" @click="toTextImitationList">
          <ClockCircleOutlined />
          历史记录</span
        >
      </div>
    </div>

    <div class="content_box">
      <div class="left_content content_item">
        <CreatTextImitationForm
          ref="CreatTextImitationFormRef"
          @setRightList="setRightList"
        ></CreatTextImitationForm>
      </div>
      <div class="right_content content_item">
        <TextList ref="TextListRef" @changeItem="changeItem"></TextList>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@radius: 8px;
@gap: 15px;
.TextImitation {
  // height: 100vh;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  // overflow: hidden;
  .content_box {
    flex: 1;
    display: flex;
    gap: @gap;
    overflow: hidden;

    .content_item {
      background-color: #fff;
      border-radius: @radius;
    }
    .left_content {
      width: 30%;
      min-width: 520px;
    }
    .right_content {
      flex: 1;
      min-width: 450px;
      // min-width: ;
    }
  }

  .title_box {
    display: flex;
    justify-content: space-between;
    padding: 10px @gap;

    background-color: #fff;
    border-radius: @radius;
    h2 {
      margin: 0;
      font-weight: 600;
      font-size: 16px;
    }
    .right_title_box {
      display: flex;
      align-items: center;
      cursor: pointer;
      .history {
        transition: all 0.3s;
        &:hover {
          color: var(--ss-primary-color-hover);
        }
      }
    }
  }
}
</style>
